/**
* @Author: 李晨光
* @Date: 2019/12/16
* @Version: 1.0
* @Last Modified by: 李晨光
* @Last Modified time: 2019/12/16
**/
<comment>
  # 组件注释
</comment>
<template>
  <div id="SubmittedDetail" class="p-box">
    <div class="p-return">
      <mu-appbar color="primary" class="lan-header">
        <mu-button icon slot="left" v-close>
          <i class="iconfont angle-left iconangle-left"></i>
          <span class="lan-header-back">返回</span>
        </mu-button>
        {{type == 'submitted' ? '我提交的详情' : '审批工作详情'}}
      </mu-appbar>
    </div>
    <div v-if="applyType == '2' " v-show="!loading" style="height:calc(100vh - .45rem);overflow: auto;background: #fff">
      <div v-if="detail.status" class="result ly_flex ly_flex_col ly_flex_ali_center ly_flex_just_center">
        <i class="iconfont " :class="detail.status == 2 ? 'iconchenggong' : 'iconqingchu'"
           :style="{color: detail.status == 2 ? '#24d90c' : '#FC334E'}"></i>
        <span class="text">{{detail.status == 2 ? '通过' : '不通过'}}</span>
      </div>
      <div class="lan-detail-list" v-if="detail.status == '1'">
        <span class="lan-detail-h">不通过原因</span>
        <span class="lan-detail-r">{{detail.approvalDesc}}</span>
      </div>
      <div class="lan-detail-list" v-if="detail.status == '2'">
        <span class="lan-detail-h">备注</span>
        <span class="lan-detail-r">{{detail.approvalDesc}}</span>
      </div>
      <div class="lan-detail-list" v-if="detail.status == '2'">
        <span class="lan-detail-h">本次奖励</span>
        <span class="lan-detail-r">{{detail.score}}分</span>
      </div>
      <div class="lan-detail-list">
        <div class="lan-detail-list-box">
          <p class="lan-detail-h">审核人</p>
          <div
            class="userBox"
            v-for="(user, index) in handurl(detail.approvalUserName)" :key="index">
            <div class="ly_flex ly_flex_just_center ly_flex_ali_center add">
              {{user.substr(0,1)}}
            </div>
            <span>{{user}}</span>
          </div>
        </div>
      </div>
      <div class="lan-detail-list">
        <span class="lan-detail-h">审批时间</span>
        <span class="lan-detail-r">{{detail.approvalTime}}</span>
      </div>
      <div class="lan-detail-list">
        <div class="lan-detail-list-box" style="width: 100%;">
          <p class="lan-detail-h">被观察人信息</p>
          <div style="width: 100%;border:0.01rem solid rgba(224,224,224,1)">
            <div class="lan-detail-list">
              <span class="lan-detail-h">姓名</span>
              <span class="lan-detail-r">{{detail.beObservedUserName}}</span>
            </div>
            <div class="lan-detail-list">
              <span class="lan-detail-h">工号</span>
              <span class="lan-detail-r">{{detail.employeeNum}}</span>
            </div>
            <div class="lan-detail-list">
              <span class="lan-detail-h">项目</span>
              <span class="lan-detail-r">{{detail.orgName}}</span>
            </div>
            <div class="lan-detail-list" v-if="detail.beObserveUserType == 2">
              <span class="lan-detail-h">单位</span>
              <span class="lan-detail-r">{{detail.unitName}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="lan-detail-list">
        <div class="lan-detail-list-box" style="width: 100%;">
          <p class="lan-detail-h">质量工匠行为</p>
          <div style="width: 100%;border:0.01rem solid rgba(224,224,224,1)">
            <div class="lan-detail-list">
              <span class="lan-detail-h">{{detail.behaviorName}}</span>
              <span class="lan-detail-r">奖励{{detail.score}}分</span>
            </div>
          </div>
        </div>
      </div>
      <div class="lan-detail-list">
        <div class="lan-detail-list-box">
          <p class="lan-detail-h">现场照片</p>
          <div class="ly_flex ly_flex_wrap_wrap thumbnail-box ly_flex_just_between">
            <!--<img class="thumbnail" :src="list" v-for="(list,index) in handurl(detail.images)" @click="preview(list,index)"  :key="index"/>-->
            <img :preview="index" class="thumbnail" :src="list" v-if="detail.scenePhotos" v-for="(list,index) in handurl(detail.scenePhotos)"
                 :key="index"/>
          </div>
        </div>
      </div>
      <div class="lan-detail-list">
        <span class="lan-detail-h">备注</span>
        <span class="lan-detail-r">{{detail.remark}}</span>
      </div>

      <div class="lan-detail-list">
        <div class="lan-detail-list-box">
          <p class="lan-detail-h">观察人</p>
          <div
            class="userBox"
            v-for="(user, index) in handurl(detail.observeUserName)" :key="index">
            <div class="ly_flex ly_flex_just_center ly_flex_ali_center add">
              {{user.substr(0,1)}}
            </div>
            <span>{{user}}</span>
          </div>
        </div>
      </div>
      <div class="lan-detail-list">
        <span class="lan-detail-h">观察时间</span>
        <span class="lan-detail-r">{{detail.observeTime}}</span>
      </div>
      <div style="padding:0 14px;">
        <div v-if="!detail.status && type == 'approve'" style="padding:0 .4rem;" class="ly_flex ly_flex_just_between">
          <mu-button color="error" @click="refuse" style="margin:.2rem 0" >审批不通过</mu-button>
          <mu-button color="primary" @click="pass" style="margin:.2rem 0" >审批通过</mu-button>
        </div>
        <mu-button v-if="type == 'submitted' && detail.status == '1'" v-show="!loading" full-width color="primary" style="margin:.2rem 0" @click="reSubmit">重新提交审批</mu-button>
      </div>
    </div>
    <div v-else style="height:calc(100vh - .45rem);overflow: auto;background: #fff">
      <div v-if="detail.status" class="result ly_flex ly_flex_col ly_flex_ali_center ly_flex_just_center">
        <i class="iconfont " :class="detail.status == 1 ? 'iconqingchu' : 'iconchenggong'"
           :style="{color: detail.status == 1 ? '#FC334E' : '#24d90c'}"></i>
        <span class="text">{{detail.status == 1 ? '不通过' : '通过'}}</span>
      </div>
      <div class="lan-detail-list" v-if="detail.status == '1'">
        <span class="lan-detail-h">不通过原因</span>
        <span class="lan-detail-r">{{detail.approvalDesc}}</span>
      </div>
      <div class="lan-detail-list" v-if="detail.status == '2'">
        <span class="lan-detail-h">本次奖励</span>
        <span class="lan-detail-r">{{detail.score}}分</span>
      </div>
      <div class="lan-detail-list">
        <div class="lan-detail-list-box">
          <p class="lan-detail-h">审核人</p>
          <div
            class="userBox"
            v-for="(user, index) in handurl(detail.approvalUserName)" :key="index" >
            <div class="ly_flex ly_flex_just_center ly_flex_ali_center add">
              {{user.substr(0,1)}}
            </div>
            <span>{{user}}</span>
          </div>
        </div>
      </div>
      <div class="lan-detail-list">
        <span class="lan-detail-h">审批时间</span>
        <span class="lan-detail-r">{{detail.approvalTime}}</span>
      </div>
      <div class="lan-detail-list">
        <span class="lan-detail-h">项目名称</span>
        <span class="lan-detail-r">{{detail.orgName}}</span>
      </div>
      <div class="lan-detail-list">
        <span class="lan-detail-h">所属区域</span>
        <span class="lan-detail-r">{{detail.areaName}}</span>
      </div>
      <div class="lan-detail-list">
        <span class="lan-detail-h">问题部位</span>
        <span class="lan-detail-r">{{detail.problemPart}}</span>
      </div>
      <div class="lan-detail-list">
        <span class="lan-detail-h">问题描述</span>
        <span class="lan-detail-r">{{detail.problemDesc}}</span>
      </div>
      <div class="lan-detail-list">
        <div class="lan-detail-list-box">
          <p class="lan-detail-h">现场照片</p>
          <div class="ly_flex ly_flex_wrap_wrap thumbnail-box ly_flex_just_between">
            <!--<img class="thumbnail" :src="list" v-for="(list,index) in handurl(detail.images)" @click="preview(list,index)"  :key="index"/>-->
            <img class="thumbnail" :src="list" v-if="detail.scenePhotos" v-for="(list,index) in handurl(detail.scenePhotos)"
                :preview="index" :key="index"/>
          </div>
        </div>
      </div>
      <div class="lan-detail-list">
        <span class="lan-detail-h">备注</span>
        <span class="lan-detail-r">{{detail.remark}}</span>
      </div>
      <div class="lan-detail-list">
        <div class="lan-detail-list-box">
          <p class="lan-detail-h">上报人</p>
          <div
            class="userBox"
            v-for="(user, index) in handurl(detail.reportUserName)" :key="index">
            <div class="ly_flex ly_flex_just_center ly_flex_ali_center add">
              {{user.substr(0,1)}}
            </div>
            <span>{{user}}</span>
          </div>
        </div>
      </div>
      <div class="lan-detail-list">
        <span class="lan-detail-h">上报时间</span>
        <span class="lan-detail-r">{{detail.reportTime}}</span>
      </div>
      <div style="padding:0 14px;">
        <div v-if="!detail.status && type == 'approve'" style="padding:0 .4rem;" class="ly_flex ly_flex_just_between">
          <mu-button color="error" @click="refuse" style="margin:.2rem 0" >审批不通过</mu-button>
          <mu-button color="primary" @click="pass" style="margin:.2rem 0" >审批通过</mu-button>
        </div>
        <mu-button v-if="applyType != '2' && type == 'approve' && detail.status == '2' && detail.isGenerateRect =='0'" full-width color="primary" style="margin:.2rem 0" @click="ledgerOrder">生成整改单</mu-button>
        <!-- <mu-button v-if="type == 'submitted' && detail.status == '1'" full-width color="primary" style="margin:.2rem 0" @click="reSubmit">重新提交审批</mu-button> -->
      </div>
    </div>
    <ImgPreview :imgUrls="imgs" :open="imgPreview" @close="closeDialog"></ImgPreview>
    <FilePreview :fileUrl="fileUrl" :open="filePreview" @close="closeFileDialog"></FilePreview>
  </div>
</template>

<script>
  import ImgPreview from "@/preview/ImgPreview.vue"
  import FilePreview from "@/preview/FilePreview.vue"
  import { MessageBox } from 'mint-ui';
  export default {
    name: 'SubmittedDetail',
    components: {
      ImgPreview,
      FilePreview
    },
    props: {},
    data() {
      return {
        api: {
          getIssuRepoDetailApi: '/safety/problemReport/detail', // 获取问题上报详情
          getObsDetailApi: '/safety/starObserve/detail', // 获取行为观察详情
          approveDataApi: '/safety/star/approval/submit'
        },
        type: '',
        applyType: '',
        id: '',
        detail: {},
        imgPreview: false,
        imgs: [],
        filePreview: false,
        fileUrl: '',
        loading: true
      }
    },
    computed: {},
    created() {
      this.type = this.$route.query.type
      this.applyType = this.$route.query.applyType
      this.id = this.$route.query.id
      if(this.id) {
        this.getDetailData(this.id)
      }

    },
    mounted() {
    },
    watch: {},
    methods: {
      // 获取随机测量详情
      getDetailData(id) {
        let api = ''
        if(this.applyType == '2') {
          api = this.api.getObsDetailApi
        }else{
          api = this.api.getIssuRepoDetailApi
        }
        this.$openLoading()
        this.$A
          .Go("get", api, {
            id: id
          })
          .then(response => {
            this.loading = false
            this.$closeLoading()
            Util.processRes(response, () => {
              this.detail = response.body;
            });
            Util.processError(this, response);
          })
          .catch(err => {
            this.loading = false
            this.$closeLoading()
            console.log(err);
          });
      },
      handurl(str) {
        if (!str) {
          return []
        } else {
          return str.split(',')
        }
      },
      preview(item, index) {
        this.imgs = [...this.handurl(this.detail.images)]
        this.imgPreview = true
      },
      filePreviewAction(url) {
        this.fileUrl = url
        this.filePreview = true
      },
      // 关闭
      openFileDialog() {
        this.filePreview = true
      },
      // 关闭
      closeFileDialog() {
        this.filePreview = false
      },
      closeDialog() {
        this.imgPreview = false
      },
      reSubmit() {
        this.$router.push({
          name: 'Observations',
          query: {
            id: this.id
          }
        })
      },
      // 通过
      pass() {
        let obj = {}
        let that = this
        MessageBox.prompt(this.applyType == '2' ? '请填写备注' : '请填写本次奖励积分',{
          showInput: true,
          inputType: this.applyType == '2' ? 'text' : 'number'
        }).then(({ value, action }) => {
          console.log(value)
          // if(value) {
          if(true) {
            if(this.applyType == '2') {
              obj = {
                applyType: "2",
                desc: value,//审批备注
                id: that.detail.approvalId,//审批任务id
                observeId: that.detail.id,//行为观察id
                result: 0//0通过 1不通过
              }
            }else{
              obj = {
                applyType: "3",
                desc: '',//审批备注
                id: that.detail.approvalId ,//审批任务id
                reportId: that.detail.reportId,//行为观察id
                result: 0,//0通过 1不通过
                areaName:that.detail.areaName || '',
                problemDesc:that.detail.problemDesc || '',
                score: value
              }
            }
            this.$openLoading()
            this.$A
              .Go("post", this.api.approveDataApi, obj)
              .then(response => {
                this.$closeLoading()
                Util.processRes(response, () => {
                  console.log(response)
                  if(this.applyType == '3') {
                    this.$router.push(
                      {
                        name:'IssueReportOrder',
                        query: {
                          id: this.id
                        }
                      }
                    )
                  }else{
                    this.$router.back()
                  }

                });
                Util.processError(this, response);
              })
              .catch(err => {
                this.$closeLoading()
                console.log(err);
              });
          }
        })
      },
      // 拒绝
      refuse() {
        let obj = {}
        let that = this
        MessageBox.prompt('请填写不通过原因',{
          showInput: true,
          inputType: 'text'
        }).then(({ value, action }) => {
          if(value) {
            if(this.applyType == '2') {
              obj = {
                applyType: "2",
                desc: value,//审批备注
                id: that.detail.approvalId,//审批任务id
                observeId: that.detail.id,//行为观察id
                result: 1//0通过 1不通过
              }
            }else{
              obj = {
                applyType: "3",
                desc: value,//审批备注
                id: that.detail.id,//审批任务id
                reportId: that.detail.reportId,//行为观察id
                result: 1,//0通过 1不通过
                areaName:that.detail.areaName,
                problemDesc:that.detail.problemDesc,
              }
            }
            this.$openLoading()
            this.$A
              .Go("post", this.api.approveDataApi, obj)
              .then(response => {
                this.$closeLoading()
                Util.processRes(response, () => {
                  this.$router.back()
                });
                Util.processError(this, response);
              })
              .catch(err => {
                this.$closeLoading()
                console.log(err);
              });
          }
        })
      },
      // 生成整改单
      ledgerOrder() {
        console.log(this.detail.reportId)
        this.$router.push({
          name: 'IssueReportOrder',
          query: {
            id: this.detail.reportId
          }
        })
      }
    },
    destroyed() {
    }
  }
</script>

<style lang="scss">
  #SubmittedDetail{
    .result{
      padding: 14px 0;
      i{
        font-size: .75rem;
      }
      .text{
        font-size:0.19rem;
        color:rgba(61,61,61,1);
        line-height:0.26rem;
      }
      border-bottom: 1px solid #e0e0e0;
    }
  }
</style>
